<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .shopcar{
        width: 200px;
        height: 300px;
        border:1px solid green;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .biaoti{
        background: lightblue;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      .money{
        height: 45px;
        line-height:45px;
        background: #DC4C40;
      }
    </style>
</head>

<body>
    <div id="app">
      <shopcar></shopcar>
    </div>
    <script src="js/vue.js"></script>
    <script>
      
        Vue.component('shopcar',{
          template:`
            <div class="shopcar">
              <biaoti></biaoti>
              <money></money>
            </div>
          `,
          components:{
            biaoti:{
              template: `<div class="biaoti">张三的商品</div>`
            },
            money:{
              template:`<div class="money">总价：6000 <button>结算</button></div>`
            }
          }
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>